혼자 공부하는 바이브 코딩 — 3장 클로드 코드 시작하기 딥다이브 학습 노트

출처: 혼자 공부하는 바이브 코딩 with 클로드 코드 (조태호) | 참고: https://github.com/taehojo/vibecoding

3장에서 다루는 내용

• 클로드 코드 설치 — Node.js, Git 설치 → npm으로 클로드 코드 설치 → 초기 설정
• 터미널 기본 사용법 — cmd, dir, mkdir, cd 명령어
• 손글씨 인식 프로그램 만들기 — MNIST 데이터셋으로 AI 프로그램 제작 + 배치 파일
• CLAUDE.md로 프로젝트 관리 — /init, # 기호, 계층적 폴더 구조

전체 흐름도

[환경 설정]              [첫 AI 프로그램]          [프로젝트 관리]
    |                       |                       |
    v                       v                       v
+-----------------+   +-------------------+   +---------------------+
| 03-1 설치       |   | 03-2 손글씨 인식   |   | 03-3 CLAUDE.md      |
|                 |   |                   |   |                     |
| Node.js 설치    |   | 프로젝트 폴더 생성 |   | /init으로 자동 생성  |
| Git 설치        |   | 클로드에 프롬프트  |   | # 기호로 빠른 추가   |
| npm install     |   | MNIST 학습+실행   |   | 계층적 폴더 구조     |
| claude 실행     |   | 배치 파일 생성     |   | 웹 버전 확장        |
+-----------------+   +-------------------+   +---------------------+

선수 지식 체크리스트

• [ ] 2장: 프롬프트 작성법과 5W1H 원칙
• [ ] 클로드 Pro 이상 유료 플랜 구독 (필수!)
• [ ] Windows 기본 조작 (파일 탐색기, 검색)

핵심 키워드

03-1 클로드 코드 설치하기

한 줄 요약

Node.js와 Git을 설치한 후, npm 명령어로 클로드 코드를 설치하고 터미널에서 첫 대화를 시작한다.

쉬운 설명 (자동차 비유)

"클로드 코드를 사용하려면 먼저 '도로'(Node.js)와 '주차장'(Git)을 만들어야 한다. 도로가 있어야 차(클로드 코드)가 달릴 수 있고, 주차장이 있어야 작업 내역을 안전하게 보관할 수 있다."

설치 3단계

Step 1: Node.js 설치
───────────────────
URL: https://nodejs.org/ko
→ [Windows 설치 프로그램(.msi)] 다운로드 → 기본 설정으로 설치

Step 2: Git 설치
───────────────
URL: https://git-scm.com
→ [Standalone Installer] → 'Git for Windows/x64 Setup' 다운로드 → 기본 설정으로 설치

Step 3: 클로드 코드 설치
──────────────────────
터미널(cmd)에서:
> npm install -g @anthropic-ai/claude-code

  • npm: Node Package Manager (패키지 관리자)
  • install: 설치 명령
  • -g: global (시스템 전체에서 사용 가능하도록)
  • @anthropic-ai/claude-code: 패키지 이름

클로드 코드 실행 및 초기 설정

터미널에서:
> claude

초기 설정 순서:
1. 테마 선택 (Light mode 권장 — 인쇄 가독성)
2. 로그인 방법 선택: "1. Claude account with subscription" ← 권장
3. 브라우저에서 계정 연동 → [승인] 버튼 클릭
4. 보안 메시지 확인 → Enter
5. 파일 접근 동의: "1. Yes, proceed" 선택

완료! "Welcome back 혼공바이브!" 메시지 확인

터미널 기본 명령어

핵심 체크포인트

• ✅ Node.js + Git → npm install → claude 실행의 3단계
• ✅ 로그인은 "Claude account with subscription" 선택 (Pro 이상)
• ✅ 터미널은 복잡한 도구가 아니라 명령어에 반응하는 간단한 대화창
• ✅ Ctrl+C 두 번으로 종료

03-2 손글씨 인식 프로그램 만들기

한 줄 요약

클로드 코드에 한 줄 프롬프트만 입력하면 MNIST 데이터셋 기반 AI 손글씨 인식 프로그램이 완성된다.

쉬운 설명 (요리 비유)

"딥러닝 전문 지식 없이도, 클로드 코드에게 '손글씨 인식 프로그램 만들어 줘'라고 말하면, AI가 레시피(코드)를 작성하고 재료(라이브러리)를 준비하고 요리(실행)까지 해준다."

프로젝트 폴더 준비

바탕화면에 폴더 구조 생성:
VibeCoding/
└── Study-01/        ← 이 폴더에서 클로드 코드를 실행

⚠️ 폴더 이름이나 파일 경로에 한글이 포함되면 인코딩 오류가 발생할 수 있음!
   폴더와 파일명에는 영문과 숫자만 사용 권장

실습 따라하기

Step 1: 프롬프트 입력 (이것만 입력!)
──────────────────────────────────
프롬프트:
"손글씨로 숫자를 입력하면 이것을 인식하는 코드를 만들어서 실행해 줘.
 모든 코드와 주석을 영어로 작성해 줘."

→ 클로드 코드가 자동으로:
  1. 작업 계획 수립
  2. digit_recognition.py 파일 생성 (파일 생성 동의: "1. Yes")
  3. requirements.txt 생성 (필요한 라이브러리 목록)
  4. pip install -r requirements.txt 실행 (라이브러리 설치)
  5. python digit_recognition.py 실행 (프로그램 실행)

Step 2: 결과 확인
────────────────
- 흰 상자에 마우스로 0~9 숫자를 그림
- [Recognize] 버튼 클릭
- 손글씨를 인식한 결과와 신뢰도가 출력됨!
  예: "Predicted Digit: 4, Confidence: 79.97%"

Step 3: 배치 파일 생성
────────────────────
프롬프트:
"숫자 인식 프로그램을 윈도우 탐색기에서 클릭해서 실행할 수 있게 해 줘."

→ 클로드 코드가 .bat 배치 파일을 생성
→ 더블 클릭만으로 프로그램 실행 가능!

MNIST 데이터셋이란?

MNIST (Modified National Institute of Standards and Technology)
- 0~9까지 손글씨 숫자 이미지 7만 장
- 각 이미지: 28×28 픽셀 흑백
- 1998년 공개 이후 지금까지 딥러닝 입문 표준 데이터셋
- 컴퓨터 비전과 머신러닝의 "Hello World"

┌──────────────────────────────────┐
│ 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0  │
│ 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1  │
│ 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2  │
│ ... (각 숫자별 수천 장의 변형)    │
│ 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9  │
└──────────────────────────────────┘

pip install -r requirements.txt 의미

pip: 파이썬 패키지 관리자
install: 설치 명령
-r requirements.txt: 이 파일에 적힌 모든 라이브러리를 설치

requirements.txt 내용:
tensorflow>=2.10.0
numpy>=1.21.0
matplotlib>=3.5.0
opencv-python>=4.6.0
Pillow>=9.0.0

→ 프로젝트에 필요한 환경을 동일하게 재현하는 파일

핵심 체크포인트

• ✅ 한 줄 프롬프트만으로 AI 손글씨 인식 프로그램 완성
• ✅ 딥러닝 이론을 몰라도 대화만으로 AI 프로그램 제작 가능
• ✅ 배치 파일(.bat)로 독립 실행 가능한 프로그램으로 변환
• ✅ 폴더/파일명에 한글 사용 금지 (인코딩 오류 방지)

03-3 CLAUDE.md로 프로그램 확장하기

한 줄 요약

CLAUDE.md 설정 파일로 프로젝트 맥락을 관리하고, 계층적 폴더 구조로 웹/데스크톱 버전을 분리한다.

쉬운 설명 (업무 인수인계 비유)

"새 직원에게 업무를 인수인계할 때 '매뉴얼'을 주듯, 클로드 코드에게 CLAUDE.md라는 '프로젝트 매뉴얼'을 주면, 세션이 끊어져도 이전 대화를 이어가는 것처럼 작업을 계속할 수 있다."

CLAUDE.md 파일이란?

프로젝트의 구조, 규칙, 명령어 등을 기록한 문서.
클로드 코드가 실행될 때 자동으로 읽어들인다.

장점:
1. 세션이 끊어져도 프로젝트 맥락을 유지
2. 매번 같은 설명을 반복하지 않아도 됨
3. 프로젝트별 특화 규칙 적용 가능

CLAUDE.md 파일 구조

# 프로젝트명
프로젝트에 대한 간단한 설명

## Project Overview
무엇을 하는 프로젝트인지 한두 문장으로 요약

## Commands
- 설치 명령, 실행 명령, 테스트 명령

## Tech Stack
- 파이썬 버전, 라이브러리 등 설명

## Architecture
- 핵심 클래스와 기능 설명
- 파일 구조와 각 파일의 역할

## Code Style
- 코드와 주석 작성, 에러 처리, 함수명 스타일

## Development Notes
- 현재 상태와 제한 사항

/init 명령어와 # 기호

/init — CLAUDE.md 자동 생성
──────────────────────────────
클로드 코드에서 '/init'을 입력하면:
→ 현재 폴더의 코드와 파일 구조를 분석
→ 체계적인 CLAUDE.md를 자동 생성

# 기호 — 빠른 규칙 추가
──────────────────────────
대화 중에 '#'을 입력하면:
→ 뒤따르는 내용을 CLAUDE.md에 규칙으로 추가

예: # 앞으로 만드는 모든 파일은 날짜와 시간을 주석으로 표시해 줘.

저장 위치 선택:
1. User memory (~/.claude/CLAUDE.md): 모든 프로젝트에 공통 적용
2. Project memory (./CLAUDE.md): 현재 프로젝트에서만 적용

계층적 폴더 구조

Study-01/                    ← 프로젝트 루트
├── CLAUDE.md               ← 공통 규칙 저장
│
├── web_version/             ← 웹 버전
│   └── CLAUDE.md           ← 웹 전용 규칙
│
└── desktop_version/         ← 데스크톱 버전
    ├── CLAUDE.md           ← 데스크톱 전용 규칙
    ├── digit_recognition.py ← 기존 파일
    └── run_digit_recognition.bat

장점:
• 공통 규칙은 루트에 한 번만 작성
• 하위 프로젝트별 특화 규칙을 분리 적용
• 전체 프로젝트의 코딩 스타일 일관성 유지

웹 버전 손글씨 인식 프로그램

프롬프트:
"웹 버전 프로그램을 브라우저에서 실행해 줘."

→ 클로드 코드가:
  1. HTML/CSS/JavaScript로 웹 애플리케이션 생성
  2. TensorFlow.js와 MNIST 모델 추가
  3. 로컬 서버 실행 (localhost:8080)
  4. 브라우저에서 손글씨 인식 프로그램 동작!

localhost란?
= 내 컴퓨터에서 실행 중인 프로그램에 접속하는 주소
  localhost:8080 = 내 컴퓨터의 8080번 포트

핵심 체크포인트

• ✅ CLAUDE.md = 프로젝트의 '인수인계 매뉴얼' (클로드 코드가 자동으로 읽음)
• ✅ /init으로 자동 생성, # 기호로 빠르게 규칙 추가
• ✅ 계층적 구조: 루트에 공통 규칙, 하위 폴더에 특화 규칙
• ✅ 데스크톱 → 웹 버전 확장도 프롬프트 한 줄로 가능

연습문제 풀이

Q1: 클로드 코드를 실행하기 위해 필수적으로 설치해야 하는 두 가지 프로그램은?

A: ② Node.js와 Git. Node.js는 클로드 코드의 실행 환경(자바스크립트 런타임)이고, Git은 소스 코드 버전 관리 도구이다.

Q2: 윈도우 운영체제에서 터미널을 실행하는 명령어는?

A: ③ cmd. Windows 작업 표시줄 검색에 'cmd'를 입력하면 명령 프롬프트가 실행된다.

Q3: npm install -g @anthropic-ai/claude-code에서 -g 옵션의 의미는?

A: ③ 시스템 전체에서 사용 가능하도록 설치. -g는 global의 약자로, 특정 폴더가 아닌 시스템 어디서든 claude 명령어를 사용할 수 있게 한다.

Q4: CLAUDE.md 파일을 자동으로 생성하는 명령어는?

A: ② /init. 현재 폴더를 분석하여 프로젝트 구조, 기술 스택, 주요 명령어 등을 자동으로 문서화한다.

부록 A: 용어 사전

부록 B: 핵심 비교표

클로드 웹 vs 클로드 코드

CLAUDE.md 저장 위치 비교

부록 C: 추천 참고 자료 & 링크